<template>
	<view class="mainCss">
		//注意必须有一个view，且只能有一个根view。所有内容写在这个view下面。
		<view class="img">
			<image class="image" src="../../static/home/homeBg.png" mode=""></image>
		</view>
		<view class="homeBg">
			<view class="titleBox" style="background: 0;">
				<view class="titleLeft">
				</view>
				<view class="titleText">
					<text style="color: #FFFFFF;">首页</text>
				</view>
				<view class="titleRight"></view>
			</view>
			<view class="addressSelect">
				<view class="addressBox" @click="getLocation">
					<img src="../../static/home/address.png" class="addressIcon">
					<text style="color: #FFFFFF;width: 100rpx;">{{add}}</text>
				</view>
				<view class="selectBorder">
					<img src="../../static/home/select.png" class="selectIcon">
					<input type="text" v-model="selectInfo" placeholder="请输入搜索内容"
						placeholder-style="color: #DFDFDF; font-size: 14px;" class="selectInput">
					<view class="selectButton">
						<text>搜索</text>
					</view>
				</view>
			</view>
			<view class="topInfo">
				<view class="textBox">
					<text style="width: 100%;">轻生活新上阵</text>
					<text style="font-size: 12px;">新店管家</text>
				</view>
				<view class="chakan">
					<text>点击查看></text>
				</view>
			</view>
			<view class="typeBox">
				<view class="typeInfo" @click="lease">
					<img src="../../static/home/lease.png" class="typeIcon">
					<text style="color: #1B1C1E; width: 100%; text-align: center;">租 铺</text>
				</view>
				<view class="typeInfo" @click="join">
					<img src="../../static/home/join.png" class="typeIcon">
					<text style="color: #1B1C1E; width: 100%; text-align: center;">加 盟</text>
				</view>
				<view class="typeInfo" @click="partnership">
					<img src="../../static/home/partnership.png" class="typeIcon">
					<text style="color: #1B1C1E; width: 100%; text-align: center;">合 伙</text>
				</view>
				<view class="typeInfo" @click="housekeeper">
					<img src="../../static/home/housekeeper.png" class="typeIcon">
					<text style="color: #1B1C1E; width: 100%; text-align: center;">管 家</text>
				</view>
			</view>
		</view>
		<view class="bodyBox">
			<view class="title">
				<text>热门推荐</text>
				<img src="../../static/home/hot.png" class="hotIcon">
			</view>
			<view class="leaseList" :animation="animationData">
				<view class="forList" v-for="(item, index) in leaselise" :key="index">
					<view class="infoBox" @click="details" :data-id="item.ID">
						<view class="infoTextBox">
							<img :src="Url + item.FaceImage" class="infoImg">
							<span style="display: flex;flex-wrap: wrap; margin-left: 20rpx;">
								<text style="width: 100%; margin: 5rpx;">{{item.Address}}</text>
								<text style="width: 100%; margin: 5rpx; font-size: 12px; color: #999999;">{{item.DistinctName}}</text>
								<text style="width: 100%; margin: 5rpx; color: #FF0000;">
								{{item.TradePrice}} <text style="font-size: 14px;">元/月</text></text>
							</span>
							<text class="distance">{{item.Distance}}</text>
						</view>
						<view class="infoUserBox">
							<span style="display: flex; align-items: center;">
								<img :src="JSON.parse(item.BasicInfo).headImg" class="userHead">
								<text style="margin-left: 15rpx; color: #999999; font-size: 12px;">发布人:{{JSON.parse(item.BasicInfo).nickName}}</text>
							</span>
							<img src="../../static/lease/more.png" class="moreIcon">
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				address: '苏州',
				animationData: {},
				leaselise:[],
				selectInfo: '',
				openid: '',
				Url: 'https://ypsf.huashengzhuan.cn',
				id: '',
				// address: '',
				add: '',
				latitude: '',
				longitude: '',
				cityName:''
			}
		},
		onLoad() {
			var that =this;
			that.getLocation(function(){
				console.log(getApp().globalData.cityDistrictID);
				console.log(getApp().globalData.longitude);
				console.log(getApp().globalData.latitude);
				that.$myRequest({
					url:'getCityShop',
					data: {
							CityDistinctID: getApp().globalData.cityDistrictID,
							SubDistrictID: 0,
							SupplyMode: 0,
							Page: '1',
							Limit: '5',
							ClassifyID: 0,
							TradePrice_Min: 0,
							TradePrice_Max: 50000,
							Aera_Min: '0',
							Aera_Max: '5000',
							TransferFee_Min: '0',
							KeyWords:that.selectInfo.trim(),
							TransferFee_Max: '500000',
							longitude: getApp().globalData.longitude,
							latitude: getApp().globalData.latitude,
							// openid: this.openid,
						},
						dataType: 'json',
				}).then(res => {
					console.log(res);
					that.leaselise = res.data;
					console.log(that.leaselise)
				}).then(err=>{
					console.log(err);
				})
			});
		},
		onShow: function() {
			
		},
		methods: {
			getLocation(callback){
				var _this = this;
			    uni.chooseLocation({
					success: function (result) {
						_this.address = result.address,
						_this.latitude = result.latitude,
						_this.longitude = result.longitude;
						getApp().globalData.latitude = result.latitude;
						getApp().globalData.longitude = result.longitude;
						console.log(getApp().globalData.latitude);
						//_this.add = _this.address[3] + _this.address[4];
						_this.$myRequest({
							url:'getCityName',
							data:{
								latitude:result.latitude,
								longitude:result.longitude
							},
							dataType:'json'
						}).then(res =>{
							var cityname  = res.data.CityName.toString();
							console.log(cityname.length);
							cityname = cityname.substring(0,cityname.length-1);
							_this.add = cityname;
							getApp().globalData.cityName = res.data.CityName;
							getApp().globalData.cityDistrictID = res.data.CityDistrictID;
							console.log(getApp().globalData.cityName);
							console.log(getApp().globalData.cityDistrictID );
							callback();
						}).then(err=>{
						})
					},
					complete(r){
					},
					fail:function(result){
					}
				})
			},
			
			getCityShop(){
				
			},
			// 切换为租铺列表
			lease() {
				uni.navigateTo({
					url: '/pages/lease/index'
				})
			},
			// 切换为加盟列表
			join() {
				uni.navigateTo({
					url: '/pages/join/index'
				})
			},
			// 切换为合伙列表
			partnership() {
				uni.navigateTo({
					url: '/pages/partnership/index'
				})
			},
			// 切换为管家列表
			housekeeper() {
				uni.navigateTo({
					url: '/pages/housekeeper/index'
				})
			},
			// 跳转到详情页面
			details(event) {
				if ( this.id == event.currentTarget.dataset.id) {
				      return false
				    }
				console.log(event)
				this.id = event.currentTarget.dataset.id
				console.log(this.id)
				uni.navigateTo({
					url: '/pages/lease/details?id=' + JSON.stringify(event.currentTarget.dataset.id),
				})
			},
		}
	}
</script>

<style>
	@import '../../css/home.css';

	.homeBg {
		width: 100vw;
		height: 35vh;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		color: #FFFFFF;
		position: relative;
		position: sticky;
		top: 0rpx;
		z-index: 9;
	}
	.img{
		position: fixed;
		width: 750rpx;
		z-index: 9;
	}
	.image{
		width: 100%;
	}
</style>
